import React from 'react';
import {connect} from 'dva';
import './index.less';
import Base from "../../../../components/Base";
import $$ from '../../../../utils';

const {Image, BaseComponent} = Base;

let x, y;

@connect()
export default class extends BaseComponent {

  constructor(props) {
    super(props);

    const ximages = [];
    const yimages = [];

    const switchParam = [];

    for (let i = 10; i < 360; i += 30) {
      ximages.push(i);
      yimages.push(i);
    }

    switchParam.push({_class: 'switch-button', color: 'iwatch-black', name: '黑'});
    switchParam.push({_class: 'switch-button', color: 'iwatch-blue', name: '蓝'});
    switchParam.push({_class: 'switch-button', color: 'iwatch-white', name: '灰'});
    switchParam.push({_class: 'switch-button', color: 'iwatch-gold', name: '金'});
    switchParam.push({_class: 'switch-button', color: 'iwatch-green', name: '绿'});
    switchParam.push({_class: 'switch-button', color: 'iwatch-pink', name: '粉'});

    this.state = {
      xindex: 0,
      yindex: 0,
      ximages,
      yimages,
      down: false,
      mode: 'no',
      color: 'iwatch-white',
      switchParam,
    };

  }

  componentDidMount(){
    this.onClick(0);
  }


  onMouseMove = (event) => {

    const {mode, down} = this.state;

    if (down) {
      $$.info('移动', event.pageX, event.pageY);

      this.judgeX(event.pageX);
      this.judgeY(event.pageY);
    }
  }

  judgeX = (pageX) => {

    const {xindex, ximages, mode} = this.state;

    if (mode === 'y') {
      return;
    }

    if (pageX - x > 5) {
      x = pageX;
      let index = xindex == ximages.length - 1 ? 0 : (xindex + 1);
      this.setState({xindex: index, mode: 'x'});

      $$.info('x变化', pageX, x, pageX - x, index);
    } else if (pageX - x < -5) {
      x = pageX;
      let index = xindex == 0 ? ximages.length - 1 : (xindex - 1);
      this.setState({xindex: index, mode: 'x'});

      $$.info('x变化', pageX, x, pageX - x, index);
    }
  }

  judgeY = (pageY) => {

    const {yindex, yimages, mode} = this.state;

    if (mode === 'x') {
      return;
    }

    if (pageY - y > 5) {
      y = pageY;
      let index = yindex == yimages.length - 1 ? 0 : (yindex + 1);
      this.setState({yindex: index, mode: 'y'});
    } else if (pageY - y < -5) {
      y = pageY;
      let index = yindex == 0 ? yimages.length - 1 : (yindex - 1);
      this.setState({yindex: index, mode: 'y'});
    }
  }

  onMouseDown = (event) => {
    $$.info('按下', event, event.pageX, event.pageY);
    this.setState({down: true});

    x = event.pageX;
    y = event.pageY;

  }

  onMouseUp = (event) => {
    $$.info('按上', event, event.pageX, event.pageY);
    this.setState({down: false, mode: 'no'});
  }

  onClick = (index) => {
    const {switchParam} = this.state;

    const sp = [];
    let color = '';
    for (let i = 0; i < switchParam.length; ++i) {
      if (index === i) {
        sp.push({ ...switchParam[i], _class: 'switch-button active'});
        color = switchParam[i].color;
      } else {
        sp.push({...switchParam[i], _class: 'switch-button'});
      }
    }

    this.setState({color, switchParam:sp});
  }


  render() {

    const {yindex, yimages, xindex, ximages, color, switchParam} = this.state;

    $$.info(switchParam, color);

    const src = `http://www.xuantech.cn/xkmodels/image.jpg?name=example/products/digitals/${color}&size=0&v=${yimages[yindex]}&h=${ximages[xindex]}&t=1444880642000`;

    const as = [];
    for (let i = 0; i < switchParam.length; ++i) {
      const {_class, color, name} = switchParam[i];
      as.push(<a className={_class} onClick={() => {
        this.onClick(i);
      }}>{name}</a>);
    }

    return (
      <div className='d_demo' onMouseUp={this.onMouseUp} onMouseDown={this.onMouseDown} onMouseMove={this.onMouseMove}>

        <div className="switch">
          {as.map((v) => {
            return v;
          })}
        </div>

        <Image src={src} width={300} height={300} draggable='false' className='image'/>

      </div>
    );
  }
}
